<template>
    <div class="app-container">
        <el-form ref="form" :model="form" label-width="120px">
            <span>友情提示：ehcache的缓存时间是30秒，30秒后从缓存中获取数据为空！</span>
            <el-form-item label="超时时间">
                <el-input v-model="rTime"  readonly=""></el-input>
            </el-form-item>
            <el-form-item label="key">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item label="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="test list">
                <el-checkbox-group v-model="form.type">
                    <el-checkbox label="kjc" name="type"></el-checkbox>
                    <el-checkbox label="zzx" name="type"></el-checkbox>
                    <el-checkbox label="kdl" name="type"></el-checkbox>
                    <el-checkbox label="xxx" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">save</el-button>
                <el-button  @click="onCancel">get</el-button>
            </el-form-item>
            
        </el-form>
        
    </div>
</template>
<script>
import { putcache, getcache } from '@/api/ehcache'
export default {
    data(){
        return {
            rTime: 30, // 发送验证码倒计时
            form:{
                name:'',
                id:'',
                type:[]
               
            }
        }
    },
    methods: {
        onSubmit() {
            const param = {
                'body': {
                  "encacheDTO":{
                    "strList": this.form.type,
                    "id": this.form.id,
                    "name": this.form.name
                 }
                }
            }
            putcache(param).then(response => {
                this.$message('缓存成功 ！30秒后失效')
                this.send();
            })
            
        },
        onCancel() {
            const param = {
                'body': {
                  "encacheDTO":{
                    "type": this.form.type,
                    "id": this.form.id,
                    "name": this.form.name
                 }
                }
            }
            getcache(param).then(response => {
                let obj = response.body.encacheDTO;
                if(obj == null){
                    this.$message("没有缓存或缓存失效！")
                    return 
                }
                this.$message('获取魂村信息'+obj.id + " "+obj.name+" "+obj.strList)
            })
           
        },
        send() {
            let rTime = this.rTime;
            // 倒计时
            let interval = window.setInterval(() => {
                if (--this.rTime <= 0) {
                this.rTime = rTime;
                window.clearInterval(interval);
                }
            }, 1000);
         }
    }
}
</script>

<style>
.line{
  text-align: center;
}
</style>

